import { Form, Select } from 'antd';
import styles from './needHandle.less';
import useStore from '@/context/useStore';
import { useEffect } from 'react';
import { Input } from 'antd'
import { observer } from 'mobx-react-lite'
import { CodepenOutlined , CommentOutlined } from '@ant-design/icons';
const { Option } = Select;


let needHandle:React.FC = () =>{
    let { need } = useStore();

    useEffect(() => {
        need.GetNeedValue();
    }, [])

    function handleChange(value:string){
        console.log(value);
        
    }

    return <div className={styles.needHandle}>
        <header className={styles.header}>
            <div className={styles.select}>
                <Select defaultValue='defaultValue' style={{ width: 120 }} onChange={value=>handleChange(value)}>
                    {
                        need.NeedValue.map((item,index)=>{
                            return <Option key={index} value={item.id}>
                            {/* {item} */}
                            {item.classname}
                        </Option>
                        })
                    }
                </Select>
            </div>

            <div className={styles.main}>
                <div>
                    <div className={styles.InfoText}>
                        <div className={styles.icon} style={{backgroundColor:"#f6e7e7"}}>
                            <CodepenOutlined style={{ fontSize: '26px', color: '#e34949' }}/>

                        </div>
                        <div>
                            <p>0</p>
                            <span>全部</span>
                        </div>

                    </div>
                </div>
                <div>
                    <div className={styles.InfoText}>
                        <div className={styles.icon} style={{backgroundColor:"#e4e5ff"}}>
                            <CommentOutlined style={{ fontSize: '26px', color: '#867dff' }}/>
                        </div>
                        <div>
                            <p>0</p>
                            <span>问答</span>
                        </div>

                    </div>
                </div>
            </div>
        </header>

        <main className={styles.main}>
            <div className={styles.Input}>
                <div>

                </div>
                <Input className={styles.Input_in} placeholder="Basic usage" />

            </div>
            <li className={styles.tableTop}>
                <span>
                    代办事项
                </span>

                <span>
                    类型
                </span>

                <span>
                    发起人
                </span>

                <span>
                    发起时间
                </span>

                <span>
                    操作
                </span>
            </li>
            <li>
                暂无数据
            </li>
        </main>
    </div>
}

export default observer(needHandle);